<script>
/* load the codepage support library for extended support with older formats  */
import { set_cptable, utils, writeFile } from 'xlsx'
import * as cptable from 'xlsx/dist/cpexcel.full.mjs'
import { isLogin } from '~/logic'
import { TRequest } from '~/utils/ali/PCRequest'
import { delete_rows } from '~/utils/deleteRows'
import {parseUrl} from "~/utils/util";
set_cptable(cptable)
// 解析location.href 的参数
const url = location.href
const paramsObj = parseUrl(url)
export default {
  name: 'Download',
  emits: ['login'],
  setup(props, context) {
    const dataSource = ref([])
    const columns = ref([])
    const title = ref('')
    const visible = ref(false)
    const loading = ref(false)
    const inputKeywords = ref('')
    const handle = async (e) => {
      if (isLogin(context)) {
        let sortParams = {}
        loading.value = true
        let sortType = 1
        if (e.key === '1') {
          Reflect.set(columns, 'value', [
            {
              title: '商品标题',
              dataIndex: 'title',
            },
            {
              title: '商品ID',
              dataIndex: 'item_id',
              width: '120px',
              sorter: { compare: (a, b) => a.item_id - b.item_id },
            },
            {
              title: '店铺名',
              dataIndex: 'nick',
              width: '120px',
            },
            {
              title: '产品图片',
              dataIndex: 'pic_url',
              width: '100px',
            },
            {
              title: '一口价',
              dataIndex: 'priceWap',
              width: '100px',
              sorter: { compare: (a, b) => a.priceWap - b.priceWap },
            },
            {
              title: '付款人数',
              dataIndex: 'realSales',
              width: '120px',
              sorter: { compare: (a, b) => parseInt(a.realSales) - parseInt(b.realSales) },
            },
            {
              title: '店铺类型',
              dataIndex: 'shopcard',
              width: '100px',
            },
            {
              title: '商品地址',
              dataIndex: 'procity',
              width: '100px',
            },
          ])
          sortParams = {
            sort: 'default',
          }
          title.value = `${paramsObj.q}付款人数`
          sortType = 1
        }
        else {
          Reflect.set(columns, 'value', [
            {
              title: '商品标题',
              dataIndex: 'title',
            },
            {
              title: '商品ID',
              dataIndex: 'item_id',
              width: '120px',
              sorter: { compare: (a, b) => a.item_id - b.item_id },
            },
            {
              title: '店铺名',
              dataIndex: 'nick',
              width: '120px',
            },
            {
              title: '产品图片',
              dataIndex: 'pic_url',

              width: '100px',
            },
            {
              title: '一口价',
              dataIndex: 'priceWap',
              width: '100px',
              sorter: { compare: (a, b) => a.priceWap - b.priceWap },
            },
            {
              title: '收货人数',
              dataIndex: 'realSales',
              width: '120px',
              sorter: { compare: (a, b) => parseInt(a.realSales) - parseInt(b.realSales) },
            },
            {
              title: '商品地址',
              dataIndex: 'procity',
              width: '100px',
            },
          ])
          sortType = 2
          title.value = `${paramsObj.q}收货人数`
        }
        visible.value = true
        const response = await TRequest.searchList(paramsObj.q, paramsObj.page, sortType)
        Reflect.set(dataSource, 'value', response.itemsArray)
        loading.value = false
      }
    }
    const exportExcel = () => {
      // const XLSX = require('xlsx')
      const table_elt = document.getElementById('exportTable')

      // Extract Data (create a workbook object from the table)
      const workbook = utils.table_to_book(table_elt, {
        raw: true,
      })
      const book = utils.book_new()
      book.Sheets.Sheet1 = workbook.Sheets.Sheet1
      book.SheetNames = workbook.SheetNames
      // workbook.Sheets[0]["!rows"].// Process Data (add a new row)
      const ws = workbook.Sheets.Sheet1
      // 删除第一行
      delete_rows(ws, 1, 1)
      for (let i = 0; i < dataSource.value.length; i++) {
        // console.log(ws[`A${i + 2}`])
        ws[`D${i + 2}`] = {
          t: 's',
          v: dataSource.value[i].pic_path,
        }
      }

      utils.sheet_add_aoa(ws, [], { origin: -1 })
      // Package and Release Data (`writeFile` tries to write and save an XLSB file)
      writeFile(workbook, `${title.value}.xlsx`)
    }
    return {
      handle,
      title,
      visible,
      columns,
      dataSource,
      loading,
      exportExcel,
      inputKeywords,
    }
  },
}
</script>

<template>
  <a-dropdown style="margin-left: 10px;">
    <template #overlay>
      <a-menu @click="handle">
        <a-menu-item key="1">
          下载此关键词总付款人数
        </a-menu-item>
        <a-menu-item key="2">
          下载此关键词收货人数
        </a-menu-item>
        <a-menu-item key="3">
          下载本页收货人数
        </a-menu-item>
      </a-menu>
    </template>
    <a-button size="small" type="primary">
      总付款/收货人数
      <DownOutlined />
    </a-button>
  </a-dropdown>
  <a-modal v-model:visible="visible" :title="title" width="80%" :footer="false">
    <a-row type="flex" style="margin-bottom: 10px;">
      <a-col>
        <a-button type="primary" @click="exportExcel">
          导出表格
        </a-button>
      </a-col>
      <a-col flex="1" />
      <a-col>
        <a-input-search v-model:value="inputKeywords" placeholder="检索商品" />
      </a-col>
    </a-row>
    <a-table
      id="exportTable" :pagination="false" size="small" :loading="loading" :columns="columns" :footer="false" :data-source="
        dataSource.filter(item => item.title.includes(inputKeywords))"
      :scroll="{ y: 500 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'pic_url'">
          <img
            :src="record.pic_path" :width="50" :height="50"
          >
        </template>
        <template v-if="column.dataIndex === 'item_id'">
          {{ record.item_id }}
        </template>
        <template v-if="column.dataIndex === 'nick'">
          <a :href="record.shopInfo.url" target="_blank">{{ record.nick }}</a>
        </template>
        <template v-if="column.dataIndex === 'title'">
          <a :href="record.auctionURL" target="_blank">{{ record.title.replace(/(<([^>]+)>)/ig, "") }}</a>
        </template>
        <template v-if="column.dataIndex === 'priceWap'">
          ¥{{ record.priceWap }}
        </template>
        <template v-if="column.dataIndex === 'shopcard'">
          {{ record.iconList.includes('tmall') ? '天猫' : '淘宝' }}
        </template>
        <!--        <template v-if="column.dataIndex === 'shopcard-delivery'"> -->
        <!--          {{ record.shopcard.delivery.length === 3 ? (record.shopcard.delivery[0] / 100) : '-' }} -->
        <!--        </template> -->
        <!--        <template v-if="column.dataIndex === 'shopcard-description'"> -->
        <!--          {{ record.shopcard.delivery.length === 3 ? (record.shopcard.description[0] / 100) : '-' }} -->
        <!--        </template> -->
        <!--        <template v-if="column.dataIndex === 'shopcard-service'"> -->
        <!--          {{ record.shopcard.delivery.length === 3 ? (record.shopcard.service[0] / 100) : '-' }} -->
        <!--        </template> -->
      </template>
    </a-table>
  </a-modal>
</template>

<style scoped>

</style>
